<template>
	<div class="login_contianer">
		<div class="login_box">
			<div class="avatar_box">
				<img src="../../assets/xiaoxiong.jpg" />
				<!-- 头像区域 -->
			</div>
			<!-- 登录表单区域 -->
			<el-form ref="loginformref" label-width="0px" :model="form" :rules="loginformrules" class="login_form">
				<!-- 用户名 -->
				<el-form-item prop="loginName"><el-input v-model="form.loginName" prefix-icon="iconfont icon-user"></el-input></el-form-item>
				<!-- 密码 -->
				<el-form-item prop="password"><el-input type="password" v-model="form.password" prefix-icon="iconfont icon-3702mima"></el-input></el-form-item>
				<!-- 按钮 -->
				<el-form-item class="btn">
					<el-button type="primary" @click="login()">登录</el-button>
					<el-button type="info" @click="reset()">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			form: {
				//from表单v-model：form
				uid:'',
				loginName: 'jiajia',
				password: '123456'
			},
			// 表单验证对象
			loginformrules: {
				loginName: [
					{
						required: true,
						message: '请输入用户名称',
						trigger: 'blur'
					},
					{
						min: 3,
						max: 10,
						message: '长度在 3 到 10个字符',
						trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: '请输入登录密码',
						trigger: 'blur'
					},
					{
						min: 6,
						max: 15,
						message: '长度在 6 到 15个字符',
						trigger: 'blur'
					}
				]
			}
		};
	},
	methods: {
		reset: function() {
			this.$refs.loginformref.resetFields();
		},
		login() {
			this.$refs.loginformref.validate(async valid => {
				if (!valid) return;
				// 如果数据返回的是promise数据对象 使用 await 和 async简化操作
				// 解析请求数据为res对象
				const { data: res } = await this.$http.post('api/Login/login', this.form);
				if (res.code !== 0) {
					return this.$message.error(res.msg);
				} 
				this.$message.success(res.msg);
				
	           window.sessionStorage.setItem('token',res.token);
			   this.$router.push('/Home');
				//1.将登录成功之后的token博爱存到客户端的sessionStorage中
				
				//1.1项目中除了登录之外的其他api接口必须在登录之后才能访问
				//1.2token只应在当前网站打开期间生效，所以将token保存在sessionStorage中
				//2.通过编程式导航跳转到后台主页，路由地址是/home
			});
		}
	}
};
</script>
<style lang="less" scoped>
.login_form {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}

// .login_contianer {
// 	background-image: url(../../assets/zhouxingxing.gif);
// 	height: 100%;
// }

.login_box {
	width: 450px;
	height: 300px;
	background-color: white;
	border-radius: 3px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	.avatar_box {
		height: 130px;
		width: 130px;
		border-radius: 50%;
		border: solid 1px #eee;
		box-shadow: 0 0 10px #ddd;
		position: absolute;
		left: 50%;
		padding: 10px;
		transform: translate(-50%, -50%);
		background-color: white;

		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #eee;
		}
	}
}

.btn {
	display: flex;
	justify-content: flex-end;
}
</style>
